<template>
  <a-modal
    width="90%"
    top="5vh"
    :modal-style="{ height: '90vh' }"
    title="商户详情"
    v-model:visible="showModal"
    fullscreen
    :align-center="false"
    :render-to-body="false"
  >
    <template #footer>
      <a-button @click="showModal = false">取消</a-button>
      <a-button type="primary" @click="submitHandle">确定</a-button>
    </template>

    <a-form
      :disabled="modalType === ModalType.VIEW"
      ref="formRef"
      :label-col-props="{ span: 6 }"
      :wrapper-col-props="{ span: 18 }"
      :model="formData"
      label-placement="left"
      label-align="right"
    >
      <a-card :bordered="false" class="mt-3 proCard" title="基本信息">
        <a-row :gutter="[16, 16]">
          <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <a-form-item
              :label-col-props="{ span: 3 }"
              :wrapper-col-props="{ span: 21 }"
              label="商户名称"
              field="poiName"
              :rules="rules.poiName"
            >
              <a-input v-model="formData.poiName" placeholder="输入商户名称" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="地区(省市县)" :rules="rules.county">
              <a-space>
                <a-select
                  value-key="regionCode"
                  :field-names="{
                    label: 'regionName',
                    value: 'regionCode',
                  }"
                  :style="{ width: '100%' }"
                  v-model="formData.province"
                  placeholder="省"
                  :options="regionTreeData"
                />
                <a-select
                  :style="{ width: '100%' }"
                  :field-names="{
                    label: 'regionName',
                    value: 'regionCode',
                  }"
                  placeholder="市"
                  :options="cityOptions || []"
                  v-model="formData.city"
                />
                <a-select
                  placeholder="区"
                  :field-names="{
                    label: 'regionName',
                    value: 'regionCode',
                  }"
                  :style="{ width: '100%' }"
                  :options="countyOptions || []"
                  v-model="formData.county"
                />
              </a-space>
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="详细地址" field="address" :rules="rules.address">
              <a-input v-model="formData.address" placeholder="输入详细地址" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="经营者姓名" field="poiOwner" :rules="rules.poiOwner">
              <a-input v-model="formData.poiOwner" placeholder="输入经营者姓名" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="经营者联系电话" field="poiOwnerPhone" :rules="rules.poiOwnerPhone">
              <a-input v-model="formData.poiOwnerPhone" placeholder="输入经营者联系电话" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-card>

      <a-card :bordered="false" class="mt-3 proCard" title="运营信息">
        <a-row :gutter="[16, 16]">
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="招商组" field="attractManDept">
              <a-select
                v-model="formData.attractManDept"
                @change="loadAttractManOptions"
                placeholder="招商组"
              >
                <a-option
                  v-for="item in deptMap['招商部'].children"
                  :key="item.deptId"
                  :value="item.deptId"
                  :label="item.deptName"
                />
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="招商人员" field="attractManId">
              <a-select v-model="formData.attractManId" placeholder="招商人员">
                <a-option
                  v-for="item in attractManOptions"
                  :key="item.userId"
                  :value="item.userId"
                  :label="item.nickname"
                />
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="合作平台" field="plantform">
              <a-select v-model="formData.plantform" multiple placeholder="合作平台">
                <a-option value="美团">美团</a-option>
                <a-option value="小时达">小时达</a-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="美团群聊名称" field="groupChat">
              <a-input v-model="formData.groupChat" placeholder="请输入群聊名称" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="美团运营" field="mtOperateDept">
              <a-select
                v-model="formData.mtOperateDept"
                @change="loadMtOperatorOptions"
                placeholder="美团运营"
              >
                <a-option
                  v-for="item in deptMap['运营部'].children"
                  :key="item.deptId"
                  :value="item.deptId"
                  :label="item.deptName"
                />
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="美团运营人员" field="mtOperator">
              <a-select v-model="formData.mtOperator" placeholder="美团运营人员">
                <a-option
                  v-for="item in mtOperatorOptions"
                  :key="item.userId"
                  :value="item.userId"
                  :label="item.nickname"
                />
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="小时达群聊名称" field="dyGroupChat">
              <a-input v-model="formData.dyGroupChat" placeholder="请输入小时达群聊名称" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="小时达运营" field="dyOperateDept">
              <a-select
                v-model="formData.dyOperateDept"
                @change="loadDyOperatorOptions"
                placeholder="小时达运营"
              >
                <a-option
                  v-for="item in deptMap['运营部'].children"
                  :key="item.deptId"
                  :value="item.deptId"
                  :label="item.deptName"
                />
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="小时达运营人员" field="dyOperator">
              <a-select v-model="formData.dyOperator" placeholder="小时达运营">
                <a-option
                  v-for="item in dyOperatorOptions"
                  :key="item.userId"
                  :value="item.userId"
                  :label="item.nickname"
                />
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="备注" field="remark">
              <a-input v-model="formData.remark" placeholder="请输入备注" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-card>
      <a-card :bordered="false" class="mt-3 proCard" title="合作平台信息/美团">
        <a-row :gutter="[16, 16]">
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="店铺名称" field="mtPoiName">
              <a-input v-model="formData.mtPoiName" placeholder="店铺名称" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="店铺ID" field="mtPoiId">
              <a-input v-model="formData.mtPoiId" placeholder="店铺ID" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="账号" field="mtAccount">
              <a-input v-model="formData.mtAccount" placeholder="账号" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="密码" field="mtPassword">
              <a-input v-model="formData.mtPassword" placeholder="密码" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="开店时间" field="mtPoiOpenTime">
              <a-date-picker class="w-full" v-model="formData.mtPoiOpenTime" type="datetime" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="营业状态" field="mtPoiState">
              <a-select v-model="formData.mtPoiState" placeholder="营业状态">
                <a-option :value="1">正常营业</a-option>
                <a-option :value="2">尚未开业</a-option>
                <a-option :value="3">暂停营业</a-option>
                <a-option :value="4">违规停业</a-option>
                <a-option :value="5">门店清退</a-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="解约原因" field="mtCancelContractReason">
              <a-input v-model="formData.mtCancelContractReason" placeholder="解约原因" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="绑定结算人" field="mtBindMan">
              <a-input v-model="formData.mtBindMan" placeholder="绑定结算人" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="商户结算人姓名" field="mtSettlementMan">
              <a-input v-model="formData.mtSettlementMan" placeholder="商户结算人姓名" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="商户结算银行卡号" field="mtSettlementCard">
              <a-input v-model="formData.mtSettlementCard" placeholder="商户结算银行卡号" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="开户行" field="mtSettlementBank">
              <a-input v-model="formData.mtSettlementBank" placeholder="开户行" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="产品项" field="mtProduceType">
              <a-select v-model="formData.mtProduceType" placeholder="产品项">
                <a-option :value="1">第一项</a-option>
                <a-option :value="2">第二项</a-option>
                <a-option :value="3">第三项</a-option>
                <a-option :value="4">第四项</a-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="城市类别" field="mtCityType">
              <a-select v-model="formData.mtCityType" placeholder="城市类别">
                <a-option :value="1">代理商门店</a-option>
                <a-option :value="2">直营城市</a-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="店铺账号位置" field="dyPoiState">
              <a-select v-model="formData.mtAccountType" placeholder="店铺账号位置">
                <a-option :value="1">合规账号</a-option>
                <a-option :value="2">非标账号1</a-option>
                <a-option :value="3">非标账号2</a-option>
                <a-option :value="4">非标账号3</a-option>
                <a-option :value="5">散店</a-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="平台扣点" field="mtPlatformDiscount">
              <a-input-number
                :precision="2"
                v-model="formData.mtPlatformDiscount"
                placeholder="平台扣点"
              >
                <template #append>%</template>
              </a-input-number>
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="公司扣点" field="mtCompanyDiscount">
              <a-input-number
                :precision="2"
                v-model="formData.mtCompanyDiscount"
                placeholder="公司扣点"
              >
                <template #append>%</template>
              </a-input-number>
            </a-form-item>
          </a-col>
        </a-row>
      </a-card>
      <a-card :bordered="false" class="mt-3 proCard" title="合作平台信息/小时达">
        <a-row :gutter="[16, 16]">
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="抖店ID" field="dyPoiId">
              <a-input v-model="formData.dyPoiId" placeholder="抖店ID" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="抖店授权手机号" field="dyAuthPhone">
              <a-input v-model="formData.dyAuthPhone" placeholder="抖店授权手机号" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="麦芽田绑定手机号" field="dyMytBindPhone">
              <a-input v-model="formData.dyMytBindPhone" placeholder="麦芽田绑定手机号" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="企业工作台是否配置" field="dyIsCompanyWorkbench">
              <a-select v-model="formData.dyIsCompanyWorkbench" placeholder="企业工作台是否配置">
                <a-option :value="1">是</a-option>
                <a-option :value="0">否</a-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="麦芽田是否配置" field="dyIsMyt">
              <a-select v-model="formData.dyIsMyt" placeholder="麦芽田是否配置">
                <a-option :value="1">是</a-option>
                <a-option :value="0">否</a-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="营业状态" field="dyPoiState">
              <a-select v-model="formData.dyPoiState" placeholder="营业状态">
                <a-option :value="1">正常营业</a-option>
                <a-option :value="2">尚未开业</a-option>
                <a-option :value="3">暂停营业</a-option>
                <a-option :value="4">违规停业</a-option>
                <a-option :value="5">门店清退</a-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="解约原因" field="dyCancelContractReason">
              <a-input v-model="formData.dyCancelContractReason" placeholder="解约原因" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="绑定结算人" field="dyBindMan">
              <a-input v-model="formData.dyBindMan" placeholder="绑定结算人" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="商户结算人姓名" field="dySettlementMan">
              <a-input v-model="formData.dySettlementMan" placeholder="商户结算人姓名" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="商户结算银行卡号" field="dySettlementCard">
              <a-input v-model="formData.dySettlementCard" placeholder="商户结算银行卡号" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="开户行" field="dySettlementBank">
              <a-input v-model="formData.dySettlementBank" placeholder="开户行" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="公司扣点" field="dyCompanyDiscount">
              <a-input-number
                :precision="2"
                v-model="formData.dyCompanyDiscount"
                placeholder="公司扣点"
              >
                <template #append>%</template>
              </a-input-number>
            </a-form-item>
          </a-col>
        </a-row>
      </a-card>
      <a-card :bordered="false" class="mt-3 proCard" title="图片信息">
        <a-row :gutter="[16, 16]">
          <a-col v-if="showModal" :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="营业执照" field="businessLicenseImg">
              <BasicUpload
                :disabled="modalType === ModalType.VIEW"
                :action="`${uploadUrl}`"
                name="file"
                :width="100"
                :height="100"
                v-model:value="formData.businessLicenseImg"
              />
            </a-form-item>
          </a-col>
          <a-col v-if="showModal" :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="法人身份证" field="legalManIdImg">
              <BasicUpload
                :disabled="modalType === ModalType.VIEW"
                :action="`${uploadUrl}`"
                name="file"
                :width="100"
                :height="100"
                v-model:value="formData.legalManIdImg"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="营业执照名称" field="businessLicense">
              <a-input v-model="formData.businessLicense" placeholder="营业执照名称" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="法人姓名" field="legalManName">
              <a-input v-model="formData.legalManName" placeholder="法人姓名" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="统一社会信用代码" field="creditCode">
              <a-input v-model="formData.creditCode" placeholder="统一社会信用代码" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="法人身份证号码" field="legalManId">
              <a-input v-model="formData.legalManId" placeholder="法人身份证号码" />
            </a-form-item>
          </a-col>
          <a-col v-if="showModal" :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="法人手持身份证" field="legalManTakeIdImg">
              <BasicUpload
                :disabled="modalType === ModalType.VIEW"
                :action="`${uploadUrl}`"
                name="file"
                :width="100"
                :height="100"
                v-model:value="formData.legalManTakeIdImg"
              />
            </a-form-item>
          </a-col>
          <a-col v-if="showModal" :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="门头照" field="storePhoto">
              <BasicUpload
                :disabled="modalType === ModalType.VIEW"
                :action="`${uploadUrl}`"
                name="file"
                :width="100"
                :height="100"
                v-model:value="formData.storePhoto"
              />
            </a-form-item>
          </a-col>
          <a-col v-if="showModal" :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="店内环境照" field="envirPhoto">
              <BasicUpload
                :disabled="modalType === ModalType.VIEW"
                :action="`${uploadUrl}`"
                name="file"
                :width="100"
                :height="100"
                v-model:value="formData.envirPhoto"
              />
            </a-form-item>
          </a-col>
          <a-col v-if="showModal" :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="食品经营许可证" field="foodBusinessLicenseImg">
              <BasicUpload
                :disabled="modalType === ModalType.VIEW"
                :action="`${uploadUrl}`"
                name="file"
                :width="100"
                :height="100"
                v-model:value="formData.foodBusinessLicenseImg"
              />
            </a-form-item>
          </a-col>
          <a-col v-if="showModal" :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-item label="门店合作协议" field="contractFile">
              <BasicUpload
                :disabled="modalType === ModalType.VIEW"
                :action="`${uploadUrl}`"
                name="file"
                :width="100"
                :height="100"
                v-model:value="formData.contractFile"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-card>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
  import { ref, onMounted, computed, reactive } from 'vue';
  import { ModalType } from '@/enums/permissionsEnum';
  import { useGlobSetting } from '@/hooks/setting';
  import { addMerchantData, updateMerchantData } from '@/api/business/record-management';
  import { Message } from '@arco-design/web-vue';
  import { BasicUpload } from '@/components/Upload';
  import { regionTreeList } from '@/api/system/region';
  import { filterEmptyChildren } from '@/utils/helper/treeHelper';
  import { useDept } from '@/hooks/system/useDept';
  import { getUserList } from '@/api/system/user';

  const { deptMap } = useDept({ deptNames: ['招商部', '运营部'] });
  const globSetting = useGlobSetting();
  const { uploadUrl } = globSetting;
  const defaultFormData = () => ({
    attractManDept: '',
    businessLicenseImg: '',
    businessLicense: '',
    province: '',
    city: '',
    county: '',
    address: '',
    attractManId: '',
    createBy: '',
    createDate: '',
    creditCode: '',
    dyAuthPhone: '',
    dyBindMan: '',
    dyCancelContractReason: '',
    dyIsCompanyWorkbench: '',
    dyIsMyt: '',
    dyMytBindPhone: '',
    dyOperateDept: '',
    dyOperator: '',
    dyPoiId: '',
    dyPoiState: '',
    dySettlementBank: '',
    dySettlementCard: '',
    dySettlementMan: '',
    envirPhoto: '',
    foodBusinessLicenseImg: '',
    contractFile: '',
    groupChat: '',
    dyGroupChat: '',
    id: null,
    legalManId: '',
    legalManIdImg: '',
    legalManTakeIdImg: '',
    mtAccountType: '',
    mtBindMan: '',
    mtCancelContractReason: '',
    mtCityType: '',
    mtCompanyDiscount: 0.0,
    mtOperateDept: '',
    mtOperator: '',
    mtPlatformDiscount: 0.0,
    mtPoiId: '',
    mtPoiName: '',
    mtPoiOpenTime: '',
    mtPoiState: '',
    mtProduceType: '',
    mtSettlementBank: '',
    mtSettlementCard: '',
    mtSettlementMan: '',
    plantform: '',
    poiName: '',
    poiOwner: '',
    poiOwnerPhone: '',
    remark: '',
    storePhoto: '',
    mtAccount: '',
    mtPassword: '',
    legalManName: '',
    dyCompanyDiscount: 0.0,
  });
  const formData = reactive<Recordable>(defaultFormData());
  const regionTreeData = ref<any[]>([]);
  const cityOptions = computed(() => {
    const provinceData = regionTreeData.value.find((item) => item.regionCode == formData.province);
    return provinceData?.children || [];
  });
  const countyOptions = computed(() => {
    return cityOptions.value.find((item) => item.regionCode == formData.city)?.children || [];
  });

  const dyOperatorOptions = ref<any[]>([]);
  function loadDyOperatorOptions(deptId: string, keep?: any) {
    dyOperatorOptions.value = [];
    if (!deptId) return;
    if (!keep) {
      formData.dyOperator = '';
    }
    getUserList({ deptId, pageSize: 99999, page: 1 }).then((res) => {
      dyOperatorOptions.value = res.list;
    });
  }
  const attractManOptions = ref<any[]>([]);
  function loadAttractManOptions(deptId: string, keep?: any) {
    attractManOptions.value = [];
    if (!deptId) return;
    if (!keep) {
      formData.attractManId = '';
    }
    getUserList({ deptId, pageSize: 99999, page: 1 }).then((res) => {
      attractManOptions.value = res.list;
    });
  }
  const mtOperatorOptions = ref<any[]>([]);
  function loadMtOperatorOptions(deptId: string, keep?: any) {
    mtOperatorOptions.value = [];
    if (!deptId) return;
    if (!keep) {
      formData.mtOperator = '';
    }
    getUserList({ deptId, pageSize: 99999, page: 1 }).then((res) => {
      mtOperatorOptions.value = res.list;
    });
  }

  function initData() {
    loadDyOperatorOptions(formData.dyOperateDept, true);
    loadMtOperatorOptions(formData.mtOperateDept, true);
    loadAttractManOptions(formData.attractManDept, true);
  }
  const modalType = ref<ModalType>(ModalType.ADD);
  const formRef = ref();
  const showModal = ref(false);
  const emit = defineEmits(['submit']);

  const rules = {
    poiName: [
      {
        required: true,
        message: '输入商户名称',
        trigger: ['blur', 'change'],
      },
    ],
    county: [
      {
        required: true,
        message: '输入省市区',
        trigger: ['blur', 'change'],
      },
    ],
    address: [
      {
        required: true,
        message: '输入详细地址',
        trigger: ['blur', 'change'],
      },
    ],
    poiOwner: [
      {
        required: true,
        message: '输入经营者姓名',
        trigger: ['blur', 'change'],
      },
    ],
    poiOwnerPhone: [
      {
        required: true,
        message: '输入经营者联系电话',
        trigger: ['blur', 'change'],
      },
    ],
  };

  async function submitHandle() {
    try {
      const validErr = await formRef.value.validate();
      if (validErr) {
        const key = Object.keys(validErr)[0];
        return Message.error(validErr[key].message);
      }
      const params = {
        plantform: Array.isArray(formData?.plantform)
          ? formData?.plantform?.filter((item) => item != '').join(',')
          : '',
      };
      if (modalType.value === ModalType.ADD) {
        await addMerchantData({ ...formData, ...params });
      }
      if (modalType.value === ModalType.EDIT) {
        await updateMerchantData({ ...formData, ...params });
      }
      emit('submit');
      Message.success('操作成功');
      showModal.value = false;
    } catch (error) {
      console.log(error);
    }
  }
  function openModal(modalTypeV: ModalType, record?: Recordable) {
    modalType.value = modalTypeV;
    switch (modalTypeV) {
      case ModalType.ADD:
        Object.assign(formData, defaultFormData());
        break;
      case ModalType.EDIT:
        Object.assign(formData, {
          ...record,
          contractFile: record?.contractFile || '',
          plantform: record?.plantform.split(','),
        });

        break;
      case ModalType.VIEW:
        Object.assign(
          formData,
          {
            ...record,
            contractFile: record?.contractFile || '',
            plantform: record?.plantform.split(','),
          } || defaultFormData(),
        );
        break;
      default:
        break;
    }
    initData();
    showModal.value = true;
  }
  onMounted(async () => {
    const list = await regionTreeList();
    regionTreeData.value = filterEmptyChildren(list);
  });

  defineExpose({ openModal });
</script>

<style lang="less" scoped>
  :deep(.arco-modal) {
    height: 90vh;
  }
  :deep(.arco-select-view-single) {
    // width: 100%;
  }
</style>
